<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>UG币充值</title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
</head>
<style>
	html,.mui-content{
		font-size: 62.5%;
		height: 100%;
		background: #fff;
		font-family: "Microsoft YaHei", "微软雅黑", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif
	}
	.mui-bar{
		background: #333;
		color: #fff;
	}
	.mui-content{
		padding:2rem 1.5rem 0 1.5rem;
	}
	.mui-bar .mui-btn-link,
	.mui-title,
	.mui-bar .mui-btn-link.mui-active, .mui-bar .mui-btn-link:active{
		color: #fff;
	}
	input[type=text]{
		height: 4.5rem;
	}
	input[type=number]{
		font-size: 1.5rem;
		height: 4.5rem;
	}
	.ug_payNum,
	.ug_payNum_items{
		margin-top: 1rem;
	}
	.ug_payNum_items>div{
		padding: .5rem .5rem 0 .5rem;
		text-align: center;
	}
	.ug_payNum_item{
		width: 95%;
		display: inline-block;
		padding: .5rem 0;
		border-radius: 1.5rem;
		font-size: 1.5rem;
		border-color: #333;
	}
	.ug_payNum label{
		font-size: 1.4rem;
	}
	.ug_bgi,
	.ug_btn_pay{
		width: 100%;
		background-image: url(img/firstRecharge.png);
		background-size: 100% 100%;
		height: 10rem;
		margin-top: 2.5rem;
	}

	.ug_btn_pay{
		margin-top: 2rem;
		line-height: 4.5rem;
		text-align: center;
		color: white;
		height: 5rem;
		background: url(img/alertBtn.png);
		background-size:100% 100%;
		padding-bottom: 5rem;
		font-size: 1.5rem;
	}
	.mui-btn:enabled:active,
	.on{
		background: #333;
		color: #fff;
	} 
	.mui-toast-container {bottom: 50% !important;}

</style>
<body>
	<div class="mui-content isWx" style="display: none;">
		<div>
			<input type="number" placeholder="请输入要充值的手机号码" name="phone1" oninput="if(value.length>11)
      {value=value.slice(0,11)}"/>
		</div>
		<div>
			<input type="number" placeholder="请输入要充值的手机号码" name="phone2" oninput="if(value.length>11)
      {value=value.slice(0,11)}"/>
		</div>
		<div class="ug_payNum">
			<label for="">请选择UG充值数量</label>
			<div class="ug_payNum_items mui-row">
				
			</div>
		</div>
		<a href="rule.html"><div class="ug_bgi"></div></a>
		<div class="ug_btn_pay">
			<span>立即支付<span class="payFor">0</span>元</span>
		</div>
	</div>
	<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
	<script src="js/base64.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	$(function(){
		//=====判断是否微信
		var ua = navigator.userAgent.toLowerCase();
        var isWeixin = ua.indexOf('micromessenger') != -1;
        if (!isWeixin) {
          $('.isWx').hide();
          document.head.innerHTML = '<title>抱歉，出错了</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"><link rel="stylesheet" type="text/css" href="https://res.wx.qq.com/open/libs/weui/0.4.1/weui.css">';
          document.body.innerHTML = '<div class="weui_msg"><div class="weui_icon_area"><i class="weui_icon_info weui_icon_msg"></i></div><div class="weui_text_area"><h4 class="weui_msg_title">请在微信客户端打开链接</h4></div></div>';
        } else{
          $('.isWx').show();
        }
		//=====微信分享
		wx.ready(function(){
			//分享到朋友圈
            wx.onMenuShareTimeline({
              title: 'U Gaming 充值', // 分享标题
              link: 'http://app.ugaming.com.cn/mp-pay/index.html', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: 'http://app.ugaming.com.cn/image/icon.png', // 分享图标
              success: function () {
                // 用户确认分享后执行的回调函数
              },
              cancel: function () {
                // 用户取消分享后执行的回调函数
              }
            });
            //   分享给朋友
            wx.onMenuShareAppMessage({
              title: 'U Gaming 充值', // 分享标题
              desc: '', // 分享描述
              link: 'http://app.ugaming.com.cn/mp-pay/index.html', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: 'http://app.ugaming.com.cn/image/icon.png', // 分享图标
              type: 'link', // 分享类型,music、video或link，不填默认为link
              dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
              success: function () {
                // 用户确认分享后执行的回调函数
              },
              cancel: function () {
                // 用户取消分享后执行的回调函数
              }
            });
		})
		//=====展示号码
		if(sessionStorage.getItem('phone')){
			$('input[name=phone1],input[name=phone2]').val(sessionStorage.getItem('phone'));
		}
		//=====获取价格
	    mui.ajax('https://ugaming-web-app-dev.jinmailife.com/chargeInfo/platform/mp',{
			dataType:'json',//服务器返回json格式数据
			type:'get',//HTTP请求类型
			timeout:10000,//超时时间设置为10秒；
			headers:{'Content-Type':'application/json'},	              
			success:function(data){
				var result = data.data.list;
				var _re = '';
				$('.ug_payNum_items').html('');
				for (var i =0;i<result.length;i++) {
					_re+='<div class="mui-col-xs-4">'
					+'<button type="button" class="mui-btn mui-btn-block mui-btn-outlined ug_payNum_item">'+result[i].ug+'UG币<br><div style="color:#bbb;display:inline;">￥</div><span style="color:#bbb;">'+result[i].amount.toFixed(2)+'</span>'
					+'<input type="hidden" value="'+ result[i].name+'">'
					+'</button>'
					+'</div>';	
				}
				//=====判断是否有缓存，有就增加class
				if(sessionStorage.getItem('chargeInfoName')){
					$('.ug_payNum_items').html(_re).find('.ug_payNum_item').each(function(){
						if($(this).find('input').val() == sessionStorage.getItem('chargeInfoName')){
							$(this).addClass('on');
							$('.payFor').text($(this).find('span').text());
						}
					})
				}else{
					$('.ug_payNum_items').html(_re).find('.ug_payNum_item').eq(0).addClass('on');
					$('.payFor').text($('.ug_payNum_items').find('.ug_payNum_item').eq(0).find('span').text());
				}
			},
			error:function(xhr,type,errorThrown){
				console.log(type);
			}
		});
		
		
		
	    //=====微信参数配置
		var b = new Base64();  
        var url = b.encode(window.location.href); 
 		mui.ajax('https://api.jinmailife.com/user/ticket/urlJsApiInfo?url='+ url,{
			dataType:'json',//服务器返回json格式数据
			type:'get',//HTTP请求类型
			timeout:10000,//超时时间设置为10秒；
			headers:{'Content-Type':'application/json'},	              
			success:function(data){
				var result = data.data;
				 wx.config({
		            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
		            appId: 'wxeeae5c0ace4e4501', // 必填，公众号的唯一标识
		            timestamp: result.timestamp, // 必填，生成签名的时间戳
		            nonceStr: result.noncestr, // 必填，生成签名的随机串
		            signature: result.sgin, // 必填，签名
		            jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
		          });
			},
			error:function(xhr,type,errorThrown){
				console.log(type);
			}
		});
		
		
		//=========调用支付插件
        var code = (function(){
        	var str = location.href;
			var num = str.indexOf('code=');
			if (num != -1) {
			   var code = str.substring(num + 5, num + 37);
			   return code;
			}
        })();
        var phone = sessionStorage.getItem('phone');
        var name = sessionStorage.getItem('chargeInfoName');
        var data = {
        	code: code,
        	chargeInfoName: name,
            phone: phone
        }
        if(code){
        	mui.ajax('https://ugaming-web-app-dev.jinmailife.com/balance/mpCharge',{
        		data:data,
				dataType:'json',//服务器返回json格式数据
				type:'post',//HTTP请求类型
				timeout:10000,//超时时间设置为10秒；
				headers:{'Content-Type':'application/json'},	              
				success:function(info){
	              	if(info.meta.success != false){
						var result = info.data;
						wx.ready(function() {
							wx.chooseWXPay({
				              appId: 'wxeeae5c0ace4e4501',
				              timestamp: result.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
				              nonceStr: result.nonceStr, // 支付签名随机串，不长于 32 位
				              package: result.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
				              signType: result.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
				              paySign: result.sign, // 支付签名
				              success: function (data) {
				                // 支付成功后的回调函数
				                mui.toast('充值成功请到APP查看余额变化！')
				              },
				              error: function () {
				                mui.toast('充值失败')
				              },
				              cancel: function () {
				                mui.toast('充值取消')
				              }
				            });
				           
			            });
		            }else{
//		            	mui.toast(info.meta.msg);
		            }
				},
				error:function(xhr,type,errorThrown){
					console.log(type);
				}
			});
        }
	})
		
		
		
		
 		//交互
 		$('.ug_payNum_items').on('click','.ug_payNum_item',function(){
 			$('.ug_payNum_items .ug_payNum_item').removeClass('on');
			$(this).addClass('on');
			if(parseInt($(this).find('span').text()) == 0){
				$('.payFor').text($(this).find('span').text());
			}else{
				$('.payFor').text(parseInt($(this).find('span').text()));
			}
 		})
		//付费
 		$('.ug_btn_pay').on('click',function(){
 			//查找有On这个class的元素，即是要充值的金额
 			$('.ug_payNum_item').each(function(i,item){
 				if($(this).hasClass('on')){
 					sessionStorage.setItem('chargeInfoName',$(this).find('input').val()); //点击充值后存金额的name字段
 				}
 			});
 			//获取code URL 
 			var URL = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxeeae5c0ace4e4501&redirect_uri=' +
	        encodeURI('http://app.ugaming.com.cn/mp-pay/index.html') +
	        '&env=dev&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect';
			//把phone存起来
			sessionStorage.setItem('phone',$('input[name=phone1]').val());
   			if($('input[name=phone1]').val() == '' || $('input[name=phone2]').val() == ''){
   				mui.toast('请输入手机号！')
   				return
   			}else if($('input[name=phone1]').val() != $('input[name=phone2]').val()){
   				mui.toast('两次手机号不一致！')
   				return
   			}else if($(this).find('input').val() == ''){
   				mui.toast('请选择UG充值数量')
   				return
   			}else{
   				window.location.replace(URL);
   			}
 		})
 		
	</script>
</body>
</html>